<script>
    import { createEventDispatcher } from "svelte";

    export let placeholder = "Noting Here";

    let file;
    let inputDom;

    const dispatch = createEventDispatcher();

    const pickHandler = (e) => {
        const _file = e.target.files[0];
        if (!_file) return;
        file = _file;
        dispatch("picked", _file, e);
    };

    const triggerClick = () => {
        inputDom.click();
    };
</script>

<div class="file-picker_container">
    <div on:click|stopPropagation={triggerClick} class="file-picker_trigger">
        <div class="file-picker_cross" />

        <input
            bind:this={inputDom}
            type="file"
            on:change={pickHandler}
            class="file-picker_input-hidden"
        />
    </div>
    <div class="file-picker_result">
        {file?.name || placeholder}
    </div>
</div>

<style>
    .file-picker_container {
        --height: 60px;
        --trigger-size: 50px;
        --trigger-padding: 4px;
        --cross-size: 40px;
        height: var(--height);
    }
    .file-picker_input-hidden {
        display: none;
    }
    .file-picker_trigger {
        border: 1px dashed;
        padding: var(--trigger-padding);
        height: var(--trigger-size);
        width: var(--trigger-size);
        position: relative;
    }
    .file-picker_cross::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--cross-size);
        border: calc((var(--trigger-size) - var(--cross-size)) / 2) solid #ccc;
    }
    .file-picker_cross::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: var(--cross-size);
        border: calc((var(--trigger-size) - var(--cross-size)) / 2) solid #ccc;
    }
</style>
